<!-- -->
<template>
	<div>
		<div class="ls-dialog__trigger" @click="onTrigger">
			<!-- 触发弹窗 -->
			<slot name="trigger"></slot>
		</div>
		<el-dialog coustom-class="ls-dialog__content" :title="title" :visible="visible" :width="width" :top="top"
			:append-to-body="true" center :before-close="close" :close-on-click-modal="true" :modal="true">

			<!-- 弹窗主要内容-->
			<div class="dialog-content">
				<el-form :rules="valueRules" ref="valueRef" :model="form" label-width="120px" size="small"
					:disabled="status == 1">
					<el-form-item label="奖品名称" prop="name">
						<!-- 单选按钮 -->
						<el-input class="ls-input" v-model="form.name" placeholder="请输入奖品名称" style="width: 300px;">
						</el-input>
					</el-form-item>
					<el-form-item label="奖品图片" prop="image">
						<div class="">
							<material-select :limit="1" v-model="form.image" />
							<div class="muted xs m-r-16">建议尺寸：100*100</div>
						</div>
					</el-form-item>

					<el-form-item label="奖品类型" prop="type">
						<!-- 单选按钮 -->
						<el-radio-group class="m-r-16 " v-model="form.type">
							<el-radio :label="0">未中奖</el-radio>
							<el-radio :label="1">积分</el-radio>
							<el-radio :label="2">优惠券</el-radio>
							<el-radio :label="3">余额</el-radio>
						</el-radio-group>
					</el-form-item>

					<el-form-item label="" prop="type_value">
						<div class="" v-if="form.type == 1">
							<el-input class="ls-input" v-model="form.type_value" placeholder="请输入积分"
								style="width: 300px;">
								<template slot="append">积分</template>
							</el-input>
						</div>
						<div class="" v-if="form.type == 3">
							<el-input class="ls-input" v-model="form.type_value" placeholder="请输入金额"
								style="width: 300px;">
								<template slot="append">元</template>
							</el-input>
							<div class="muted xs">余额发放至用户钱包余额</div>
						</div>
						<div class="flex" v-if="form.type == 2">
							<el-select class="ls-select" v-model="form.type_value" placeholder="全部">
								<div v-for="(value,key) in coupon" :key="key">
									<el-option :label="value.name" :value="value.id"></el-option>
								</div>
							</el-select>
							<div class="m-l-10">
								<router-link target="_blank" to="/coupon/edit" class="m-r-10">
									<el-button type="text" size="small">新建优惠券</el-button>
								</router-link>
								<el-button size="small" type="text" @click="couponLists">刷新</el-button>
							</div>
						</div>
					</el-form-item>

					<el-form-item label="奖品数量" prop="num" v-if="form.type != 0">
						<el-input class="ls-input" :min="1" v-model.number="form.num" placeholder="请输入奖品数量"
							style="width: 300px;">
						</el-input>
					</el-form-item>
					<el-form-item label="抽中概率" :prop="mode == 'add'?'probability' : 'probability_desc'"
						v-if="form.type != 0">
						<el-input class="ls-input" v-model="form.probability" placeholder="请输入抽中概率"
							style="width: 300px;" v-if="mode == 'add'">
							<template slot="append">%</template>
						</el-input>
						<el-input class="ls-input" v-model="form.probability_desc" placeholder="请输入抽中概率"
							style="width: 300px;" v-if="mode == 'edit'">
							<template slot="append">%</template>
						</el-input>
						<div class="muted xs">概率不能超过100%，可保留两位小数</div>
					</el-form-item>

					<el-form-item label="抽中提示语" prop="tips">
						<el-input class="ls-input" v-model="form.tips" placeholder="请输入抽中提示语" style="width: 300px;">
						</el-input>
					</el-form-item>

				</el-form>
			</div>

			<!-- 底部弹窗页脚 -->
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="close">取消</el-button>
				<el-button size="small" @click="onSubimt" type="primary" :disabled="status == 1">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts">
	import {
		Component,
		Prop,
		Vue,
		Watch,
	} from "vue-property-decorator";
	import {
		apiLuckyDrawEdit,
		apiLuckyDrawDetail,
		apiLuckyDrawAdd,
		apiLuckyDrawGetPrizeType,
	} from "@/api/marketing/lucky_draw"
	import {
		apiCouponLists
	} from "@/api/marketing/coupon"
	import MaterialSelect from '@/components/material-select/index.vue'
	import {
		deepClone
	} from '@/utils/util'
	@Component({
		components: {
			MaterialSelect
		},
	})
	export default class LsLuckyDrawChange extends Vue {

		@Prop() index ? : number // 编辑礼品行数
		@Prop() val ? : object // 礼品数据{}
		@Prop() status ? : string // 是否禁用
		@Prop() mode ? : string // 模式
		@Prop({
			default: '编辑奖品'
		}) title!: string //弹窗标题
		@Prop({
			default: '700px'
		}) width!: string | number //弹窗的宽度
		@Prop({
			default: '20vh'
		}) top!: string | number //弹窗的距离顶部位置
		/** S Data **/
		visible = false
		$refs!: {
			valueRef: any
		}
		form = {
			name: '', // 奖品名称
			image: '', // 奖品图片
			type: 0, // 奖品类型 // 0-未中奖; 1-积分; 2-优惠券; 3-余额; 
			type_value: 0, // 奖品值
			type_desc: '', // 奖品描述
			num: 0, // 奖品数量
			probability: 0, // 中奖概率
			tips: '', // 中奖提示
			status: '',
			probability_desc: 0,
		}

		coupon = []

		// 表单验证
		valueRules = {
			name: [{
				required: true,
				message: '请输入奖品名称',
				trigger: 'blur'
			}],
			image: [{
				required: true,
				message: '请选择奖品图片',
				trigger: 'blur'
			}],
			type: [{
				required: true,
				message: '请选择奖品类型',
				trigger: 'change'
			}],
			tips: [{
				required: true,
				message: '请输入中奖提示',
				trigger: 'blur'
			}],
			num: [{
				required: true,
				message: '请输入奖品数量',
				trigger: 'blur'
			}, {
				validator: (rule: object, value: string, callback: any) => {
					if (Number(value) <= 0) {
						callback(new Error('请输入大于0的数'))
					} else {
						callback();
					}
				},
				trigger: 'blur'
			}],
			type_value: [{
				required: true,
				message: '请输入',
				trigger: 'blur'
			}, 
			// {
			// 	validator: (rule: object, value: string, callback: any) => {
			// 		if (Number(value) <= 0 && this.form.type != 2) {
			// 			console.log('夕阳西下，断肠人在天涯')
			// 			console.log('this.form.type', this.form.type)
			// 			callback(new Error('请输入大于0的数'))
			// 		} else {
			// 			callback();
			// 		}
			// 	},
			// 	trigger: 'blur'
			// },
			],
			probability: [{
				required: true,
				message: '请输入中奖概率',
				trigger: 'blur'
			}, {
				validator: (rule: object, value: string, callback: any) => {
					if (Number(value) <= 0) {
						callback(new Error('请输入大于0的数'))
					} else {
						callback();
					}
				},
				trigger: 'blur'
			}],
			probability_desc: [{
				required: true,
				message: '请输入中奖概率',
				trigger: 'blur'
			}, {
				validator: (rule: object, value: string, callback: any) => {
					if (Number(value) <= 0) {
						callback(new Error('请输入大于0的数'))
					} else {
						callback();
					}
				},
				trigger: 'blur'
			}],
		}
		/** E Data **/

		// 0-未中奖; 1-积分; 2-优惠券; 3-余额;
		@Watch('val', {
			immediate: true
		})
		getValue(val: any) {
			console.log('val', val)
			// this.form = val
			this.form = deepClone(val)
			console.log(this.form)
		}

		@Watch('form.probability_desc', {
			immediate: true
		})
		getProbability(val: any) {
			if (this.mode == 'edit') {
				this.form.probability = val * 1
			}
		}

		@Watch('form.type', {
			immediate: true
		})
		getType(val: any) {
			if (val == 0) {
				this.form.type_desc = '未中奖'
			} else if (val == 1) {
				this.form.type_desc = '积分'
			} else if (val == 2) {
				this.form.type_desc = '优惠券'
			} else if (val == 3) {
				this.form.type_desc = '余额'
			}
		}

		goToCouponEdit() {
			window.open('/admin/coupon/edit', '_blank')
		}

		couponLists() {
			apiCouponLists({
					status: 2,
					get_type: 2,
				})
				.then((res: any) => {
					console.log('res', res)
					this.coupon = res.lists
				})
		}

		/** S Methods **/
		onSubimt() {
			this.$refs.valueRef.validate((valid: boolean): any => {
				if (!valid) return;

				this.form.type_value = this.form.type_value * 1

				this.$emit('setPrize', this.form, this.index)
				this.visible = false
			})
		}

		onTrigger() {
			this.couponLists()

			// if(this.form.status == '' || this.form.status == null) {
			// 	this.form.type = 0
			// }

			this.visible = true;
		}

		// 关闭弹窗
		close() {
			this.visible = false;

			// 重制表单内容 
			// this.$set(this.form, 'name', '')
			// this.$set(this.form, 'image', '')
			// this.$set(this.form, 'type', 0)
			// this.$set(this.form, 'type_value', 0)
			// this.$set(this.form, 'num', 0)
			// this.$set(this.form, 'probability', 0)
			// this.$set(this.form, 'tips', '')
		}
		/** E Methods **/

		/** S Life Cycle **/
		/** E Life Cycle **/
	}
</script>

<style scoped lang="scss">
	.dialog-content {
		min-height: 500px;
	}
</style>
